<template>
  <div class="from">
    <el-form :model="loginForm" label-position="top">
      <template v-if="steps == 1">
        <template v-if="loginTyle == 1">
          <el-form-item :label="t('login.phoneLabel')">
            <el-input
              v-model="loginForm.phone"
              :placeholder="t('login.phonePlaceholder')"
              class="country-selector-container"
              size="large"
            >
              <template #prepend>
                <div class="left-content">
                  <el-select
                    v-model="loginForm.country"
                    value-key="id"
                    :placeholder="t('login.countryPlaceholder')"
                    style="width: 70px"
                    size="large"
                  >
                    <template #prefix>
                      <img
                        :src="loginForm.country.img"
                        class="select-img"
                        alt=""
                      />
                    </template>
                    <el-option
                      v-for="item in countryOptions"
                      :key="item.id"
                      :value="item"
                      label=" "
                    >
                      <div class="option-img">
                        <img :src="item.img" alt="" />
                        <span>{{ item.code }}</span>
                      </div>
                    </el-option>
                  </el-select>
                  <span class="country-code-text">{{
                    loginForm.country.code
                  }}</span>
                </div>
              </template>
            </el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item :label="t('login.emailLabel')">
            <el-input
              v-model="loginForm.email"
              size="large"
              :placeholder="t('login.emailPlaceholder')"
            >
              <template #prefix>
                <svg-icon name="login-email" class="svg-style"></svg-icon>
              </template>
            </el-input>
          </el-form-item>
        </template>
        <el-form-item :label="codeLabel">
          <el-input
            size="large"
            v-model="loginForm.code"
            :placeholder="t('login.codePlaceholder')"
          >
            <template #suffix>
              <span
                class="code-style"
                :class="{ 'is-disabled': isCountingDown }"
                @click="getCode"
              >
                {{ codeButtonText }}
              </span>
            </template>
          </el-input>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item :label="t('login.passwordInputLabel')">
          <el-input
            size="large"
            type="password"
            v-model="loginForm.password"
            clearable
            :placeholder="t('login.passwordPlaceholder')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="t('login.passwordAgainLabel')">
          <el-input
            size="large"
            type="password"
            v-model="loginForm.againPassword"
            clearable
            :placeholder="t('login.passwordAgainPlaceholder')"
          >
          </el-input>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script setup>
import img404 from "~/assets/404.png";
import loginImg from "~/assets/login.png";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import { validateEmail } from "~/utils/utils";

import { GetCodeOfEmail } from "~/apis/web";

const { t } = useI18n();

const props = defineProps({
  loginTyle: {
    type: Number,
    default: 1,
  },
  steps: {
    type: Number,
    default: 1,
  },
});

// 1.手机号登录   2邮箱登录
// 国家区号选项
const countryOptions = ref([
  { code: "+1", flag: "🇺🇸", img: img404, id: 1 },
  { code: "+86", flag: "🇨🇳", img: loginImg, id: 2 },
  // 你可以在这里添加更多国家
]);

// 登录表单
const loginForm = reactive({
  phone: "",
  password: "",
  againPassword: "",
  // 默认选中第一个国家
  country: countryOptions.value[0],
  email: "",
  code: "",
});

const countdown = ref(0);
watch(
  () => props.loginTyle,
  () => {
    loginForm.phone = "";
    loginForm.password = "";
    loginForm.againPassword = "";
    loginForm.email = "";
    loginForm.code = "";
    loginForm.country = countryOptions.value[0];
    countdown.value = 0;
  }
);

const isCountingDown = computed(() => countdown.value > 0);
const codeLabel = computed(() =>
  props.loginTyle == 1 ? t("login.smsCodeLabel") : t("login.emailCodeLabel")
);
const codeButtonText = computed(() =>
  isCountingDown.value
    ? t("login.codeCountdown", { time: countdown.value })
    : t("login.getCode")
);
const handleIsGetCode = () => {
  if (props.loginTyle == 1) {
    if (
      loginForm.phone == "" ||
      loginForm.phone == null ||
      loginForm.phone == undefined
    ) {
      ElMessage.error(t("login.phoneRequired"));
    } else {
      return true;
    }
  } else if (props.loginTyle == 2) {
    if (!validateEmail(loginForm.email)) {
      ElMessage.error(t("login.emailInvalid"));
    } else {
      return true;
    }
  }
};

const getCode = () => {
  if (isCountingDown.value) return;
  // 在这里你可以调用API来发送验证码
  // 这里我们只做倒计时的演示
  const isGetCode = handleIsGetCode();
  if (!isGetCode) return;

  let obj = {
    scene: 22,
    email: loginForm.email,
  };
  GetCodeOfEmail(obj).then((res) => {
    if (res.code == 0) {
      countdown.value = 60;
      const timer = setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    }
  });
};

defineExpose({
  loginForm,
});
</script>

<style lang="less" scoped>
.from {
  margin-top: 24px;

  .country-selector-container {
    width: 100%;

    .left-content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .country-code-text {
        flex: 1;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
      }

      .select-img {
        width: 36px;
        height: 22px;
        margin-left: -10px;
        border: 1px solid red;
      }
    }
  }

  :deep(.el-select) {
    margin: 0;
  }

  // 调整prepend插槽的内边距，使整体布局更紧凑
  :deep(.el-input-group__prepend) {
    width: 120px;
    padding: 0 !important;
  }
}

.code-style {
  cursor: pointer;
  font-family: PingFang HK, PingFang HK;
  font-weight: 400;
  font-size: 14px;
  color: var(--el-color-primary);

  &.is-disabled {
    color: #c0c4cc;
    cursor: not-allowed;
  }
}

.option-img {
  display: flex;
  align-items: center;
  gap: 8px;

  img {
    width: 36px;
    height: 22px;
    border: 1px solid red;
  }

  span {
    flex: 1;
  }
}
</style>
